<template>
  <div>
    <h2>state</h2>
    root/title : {{ title }}
    {{ count }}
    <!-- root/title : {{ $store.state.title }} -->
    <hr>
    root/a/title : {{ aTitle }}
    <!-- root/a/title : {{ $store.state.a.title }} -->
    <hr>
    root/a/a1/title : {{ aA1Title }}
    <!-- root/a/a1/title : {{ $store.state.a.a1.title }} -->
    <hr>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['title', 'count']),
    // ...mapState({
    //   title: 'title',
    //   count: 'count'
    // }),
    // ...mapState('a', ['aTitle']),
    ...mapState('a', {
      aTitle: 'title',
    }),
    ...mapState('a/a1', {
      aA1Title: 'title',
    })
    // ...mapState({
    //   title(state) {
    //     return state.title
    //   },
    //   aTitle(state) {
    //     return state.a.title
    //   }
    // })

  },
  methods: {

  },



}
</script>

<style>
div {
  padding: 10px;
  margin: 10px;
  border: solid;
}
</style>